<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Popconfirm title="确定要删除吗"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="handleBatchDeletUser">
          <a-button type="primary">批量删除</a-button>
        </Popconfirm>
        <a-button type="primary"
                  @click="handleCreate">新增文章</a-button>
      </template>
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>

    <Modal @register="registerModal"
           @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {
  ActionItem,
  BasicColumn,
  BasicTable,
  EditRecordRow,
  FormSchema,
  useTable,
  TableAction,
} from '/@/components/Table';
import { ListApi, EditApi, DeleteApi } from '/@/api/article/index';
import { onlineStatus, classification } from '/@/assets/dic';
import formatDic from '/@/utils/formatDic';
import { UserItem } from '/@/api/user/userModel';
import Modal from './modal.vue';
import { useModal } from '/@/components/Modal';
import { Popconfirm } from 'ant-design-vue';
import { GetcitylistApi } from '/@/api/activityAdmin/index';
const columns: BasicColumn[] = [
  {
    title: '分类',
    dataIndex: 'type',
    format: formatDic(classification),
  },
  {
    title: '文章标题',
    dataIndex: 'title',
  },
  {
    title: '发布者',
    dataIndex: 'publisher',
  },
  {
    title: '发布时间',
    dataIndex: 'createTime',
  },
  {
    title: '浏览量',
    dataIndex: 'views',
  },
  {
    title: '状态',
    dataIndex: 'isUse',
    format: formatDic(onlineStatus),
  },
];

const colProps = {
  span: 6,
};
const schemas: FormSchema[] = [
  {
    label: '发布者：',
    field: 'publisher',
    component: 'Input',
    colProps,
  },
  {
    label: '文章标题：',
    field: 'title',
    component: 'Input',
    colProps,
  },
  {
    label: '分类：',
    field: 'type',
    component: 'Select',
    componentProps: {
      options: classification,
    },
    colProps,
  },
  {
    label: '状态：',
    field: 'isUse',
    component: 'Select',
    componentProps: {
      options: onlineStatus,
    },
    colProps,
  },
  {
    label: '区域：',
    field: 'city',
    component: 'ApiSelect',
    componentProps: {
      api: GetcitylistApi,
      numberToString: true,
      resultField: 'data',
      labelField: 'city',
      valueField: 'city',
    },
    colProps,
  },
];

export default defineComponent({
  name: 'AverageUser',
  components: {
    BasicTable,
    TableAction,
    Modal,
    Popconfirm,
  },
  setup() {
    // const selectedRowKeys = ref<string[]>([]);
    const [registerModal, { openModal }] = useModal();
    const [registerTable, { reload, getSelectRows }] = useTable({
      api: ListApi,
      useSearchForm: true,
      rowSelection: {
        type: 'checkbox',
      },
      columns,
      formConfig: {
        schemas,
        labelWidth: 100,
      },
      actionColumn: {
        width: 180,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
    });

    function handleSuccess() {
      console.log(1111);
      reload();
    }
    // 改变用户的使用状态
    function handleChangeStatus(record: UserItem) {
      record.isUse = record.isUse === 0 ? 1 : 0;
      console.log(record);
      EditApi(record).then((_) => {
        reload();
      });
    }

    // 删除用户
    function handleDeletUser(ids: number | number[]) {
      DeleteApi(ids).then((_) => {
        reload();
      });
      console.log(ids);
    }

    // 拿到需要批量删除的id
    function handleBatchDeletUser() {
      const selectRows = getSelectRows();
      const ids = selectRows.map((item) => item.id);
      handleDeletUser(ids);
    }
    function handleCreate() {
      openModal(true, {
        isUpdate: false,
      });
    }

    function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
      return [
        {
          label: '编辑',
          color: 'success',
          onClick() {
            openModal(true, {
              record,
              isUpdate: true,
            });
          },
        },
        {
          label: record.isUse === 0 ? '上线' : '下线',
          onClick: handleChangeStatus.bind(null, record as UserItem),
        },
        {
          label: '删除',
          color: 'error',
          popConfirm: {
            title: '确定要删除吗！',
            confirm() {
              handleDeletUser(record.id);
            },
          },
        },
      ];
    }
    return {
      registerTable,
      createActions,
      handleBatchDeletUser,
      registerModal,
      handleSuccess,
      handleCreate,
    };
  },
});
</script>
<style lang="less" scoped></style>
